<script src="./vue.js"></script>
<div id="app">
    <my-parent></my-parent>

</div>
<!-- 定义子组件 -->
<template id="child">
    <div>
        <ul>
            <li>姓名：{{show.name}}</li>
            <li>角色：{{show.role}}</li>
            <li>是否可用：{{show.isBegin}}</li>
        </ul>
    </div>
</template>
<!-- 定义父组件 -->
<template id="parent">
    <div>
        <h3>角色搜索</h3>
        <label>角色名单：</label><input type="text" v-model="name" />
        <my-child v-bind:name="name"></my-child>
    </div>
</template>
<script>
    Vue.component('my-parent', {
        template: "#parent",
        data() {
            return {
                name: ""
            }
        }
    })
    Vue.component("my-child",{
        template: "#child",
        data() {
            return {
                content: [
                    { "name": "武松", "role": "教头", "isBegin":  0},
                    { "name": "松江", "role": "领导", "isBegin":  1},
                    { "name": "林冲", "role": "教头", "isBegin":  1},
                    { "name": "叶二娘", "role": "教头", "isBegin":  0},
                ],
                show: { "name": "", "role": "", "isBegin": '' }
              
            }
        },
props: ["name"],//设置父组件与子组件相互传值的属性设置
        watch: {
            //通过获取父组件传递的数值进行查找
            name() {
                //判断数值是否为空
                if (this.$props.name) {
                    //设置返回值的
                    var found = false
                    // 查找与数据相同的值
                    this.content.forEach((v, i) => {
                        if (v.name === this.$props.name) {
                            //获取相同数值的集合
                            found = v
                        }
                    });
                    // 将查询的数据值赋值到对象中
                    this.show = found ? found : { "name": "", "role": "", "isBegin": "" }
                } else {
                    return
                }
            }
        }
    })
    var vu=new Vue({
        el:'#app'
    })




</script>
<style>

</style>